import { Input, Button,Table ,Switch,message} from 'antd';
import { useEffect, useState,useRef } from 'react';
// 引入获取用户列表api方法
import { getUsersList,updateUserState } from '../../api/user';
import { EditOutlined,DeleteOutlined,SettingOutlined } from '@ant-design/icons';
import { Pagination } from 'antd';
import AddOrUpdate from './components/add-or-update';
import SetRoles from './components/set-roles';
// 引入获取角色列表自定义hook
import useRolesList from './hooks/getRolesList';
const { Search } = Input;
function Users(){
    let [messageApi,context] = message.useMessage();
    // 定义搜索关键字状态
    let [query,setQuery] = useState("");
    // 定义当前页吗
    let [pagenum,setPagenum] = useState(1);
    // 定义每页展示几条数据
    let [pagesize,setPagesize] = useState(5);
    // 定义表格数据
    let [tableData,setTableData] = useState<UsersTableItem[]>()
    // 定义数据总数
    let [total,settotal] = useState(0);
    //定义加载状态
    let [loading,setLoading] = useState(false);
    // 定义添加或修改组件ref对象
    let AddOrUpdateRef:{current:any} = useRef();
    // 定义设置角色组件ref对象
    let SetRolesRef:{current:any} = useRef();
    // 获取用户列表
    let getDataList = async ()=>{
        setLoading(true)
        let data:UsersListParams = {
            query,
            pagenum,
            pagesize
        }
        // 发送请求
        let res:ResponsType = await getUsersList(data);
        console.log(res)
        setTableData(res.data.data.users);
        settotal(res.data.data.total)
        setLoading(false)
    }
    useEffect(()=>{
        getDataList()
    },[pagenum,pagesize,query])
    // 分页
    let pageChange=(value:number,size:number)=>{
        // 将最新页面 大小更新
        setPagenum(value);
        setPagesize(size);
    }
    let columns =[
        {
            dataIndex:"id",
            title:"用户id",
            width:100
        },
        {
            dataIndex:"username",
            title:"用户名"
        },
        {
            dataIndex:"email",
            title:"邮箱"
        },
        {
            dataIndex:"mobile",
            title:"电话"
        },
        {
            dataIndex:"role_name",
            title:"角色"
        },
        {
            dataIndex:"mg_state",
            title:"状态",
            render(text:boolean,recoder:UsersTableItem){
                return (
                    <Switch checked={text}  onChange={async (value)=>{
                        console.log(value)
                        // 发送请求修改状态
                        let res:ResponsType = await updateUserState(recoder.id,value);
                        if(res.data.meta.status ===200){
                            messageApi.success(res.data.meta.msg)
                            getDataList();
                        }else{
                            messageApi.error(res.data.meta.msg)
                        }
                    }}/>
                )
            }
        },
        {
            dataIndex:"actions",
            title:"操作",
            width:300,
            render(text:boolean,recoder:UsersTableItem){
                return <div>
                    <Button type='primary' size='small' icon={<EditOutlined />} onClick={()=>{
                        AddOrUpdateRef.current.init(recoder)
                    }}>编辑</Button>&nbsp;&nbsp;
                    <Button type='primary' size='small' danger icon={<DeleteOutlined />}>删除</Button> &nbsp;&nbsp;
                    <Button type='primary' size='small' icon={<SettingOutlined />} onClick={()=>{
                        SetRolesRef.current.init(recoder)
                    }}>分配角色</Button>
                </div>
            }
        },

    ]
    return (
        <div>
            {context}
           <div>
                <Search placeholder="输入关键字搜索" style={{ width: 300 }} value={query} onChange={(e)=>{
                    setQuery(e.target.value)
                }}/>
                &nbsp;    &nbsp; 
                <Button type="primary" onClick={()=>{
                    AddOrUpdateRef.current.init();
                }}>添加用户</Button>
           </div>
           <div style={{margin:"20px 0"}}>
            <Table bordered columns={columns} dataSource={tableData} pagination={false} rowKey='id' scroll={{x:500}} loading={loading}></Table>
           </div>
           <div>
           <Pagination showQuickJumper current={pagenum} pageSize={pagesize} total={total} onChange={pageChange}  pageSizeOptions={[5,10,15,20]} showSizeChanger/>
           </div>
           <AddOrUpdate ref={AddOrUpdateRef} over={(res:ResponsType)=>{
                if(res.data.meta.status===201 || res.data.meta.status ===200){
                    messageApi.success(res.data.meta.msg)
                    getDataList();
                }
           }}/>
           <SetRoles ref={SetRolesRef} rolesList ={useRolesList()} over={(res:ResponsType)=>{
                if(res.data.meta.status ===200){
                    messageApi.success(res.data.meta.msg)
                    getDataList();
                }
           }}></SetRoles>
        </div>
    )
    
}

export default Users;